<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->

<!-- begin header -->
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"
	media="all" />
<link rel="stylesheet" type="text/css"
	href="resources/css/bootstrap-responsive.css" media="all" />
<link rel="stylesheet" type="text/css" href="resources/css/flexslider.css"
	media="all" />
<link rel="stylesheet" type="text/css" href="resources/css/font-awesome.css"
	media="all" />
<link rel="stylesheet" type="text/css" href="resources/css/prettyPhoto.css"
	media="all" />
<link rel="stylesheet" type="text/css" href="resources/css/red.css" media="all" />
<link rel="stylesheet" type="text/css" href="resources/css/sidebar-nav.css"
	media="all" />
<link rel="stylesheet" type="text/css" href="resources/css/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="resources/css/icon-css.css"
	media="all" />
<link href="css/webwidget_menu_glide.css" rel="stylesheet"
	type="resources/text/css" />
<link rel="stylesheet" type="text/css" href="resources/css/nice-menu.css"
	media="all" />
</h:head>
<h:body>
	<!-- Top menu -->
	<div class="container" style="width: 940px">
		<div class="bg_topmenu">
			<div id="TopMenu">
				<ul>	
					<li class="dropdown dropdown-big" style="margin-top: 11px">Welcome <b>#{userLoginManagedBean.username}</b>,</li>
					<li class="dropdown dropdown-big" style="font-weight: bold; color: red;">
						<h:form>
							<h:commandLink action="#{userLoginManagedBean.logout}">Logout</h:commandLink>
						</h:form>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- End top menu -->
	
	
	<div class="navbar" style="width: 940px; margin: 0px auto;">
		<div class="container">
			<!-- Slide picture -->
			<div class="row-fluid " style="max-height: 400px; width: 940px; padding-bottom: 20px ">
                <div id="myCarousel" class="carousel slide" style="width: 940px;">
                    <!-- Carousel items -->
                    <div class="carousel-inner" style="width: 940px ">
                        <div class=" item" style="min-width: 940px !important; max-width: 940px !important; min-height: 400px !important; max-height: 600px !important; background-color: white; border: none; box-shadow: none">
                            <img src="img/banner-1.gif" style="width: 920px !important; 
                            height: 400px !important"/>
                        </div>
                        <div class=" item" style="min-width: 940px !important; max-width: 940px !important; min-height: 400px !important; max-height: 400px !important; background-color: white; border: none; box-shadow: none">
                            <img src="img/banner-2.gif" style="width: 920px !important; 
                            height: 400px !important"/>
                        </div>
                        <div class=" item" style="min-width: 940px !important; max-width: 940px !important; min-height: 400px !important; max-height: 400px !important; background-color: white; border: none; box-shadow: none">
                            <img src="img/banner-3.jpg" style="width: 920px !important; 
                            height: 400px !important"/>
                        </div>
                        <div class=" item" style="min-width: 940px !important; max-width: 940px !important; min-height: 400px !important; max-height: 400px !important; background-color: white; border: none; box-shadow: none">
                            <img src="img/banner-4.jpg" style="width: 920px !important; 
                            height: 400px !important"/>
                        </div>
                        <div class=" item" style="min-width: 940px !important; max-width: 940px !important; min-height: 400px !important; max-height: 400px !important; background-color: white; border: none; box-shadow: none">
                            <img src="img/banner-5.jpg" style="width: 920px !important; 
                            height: 400px !important"/>
                        </div>
                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left"  href="#myCarousel" data-slide="prev">&#8249;</a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next">&#8250;</a>
                </div>
            </div> 
            <!-- End Slide picture -->
            
            <br/>
            
            <!-- Navigation menu -->
			<div id="webwidget_menu_glide" class="webwidget_menu_glide"
				style="width: 930px;">
				<div class="webwidget_menu_glide_sprite"></div>
				<ul>
					<li class="current"><a href="index.xhtml">Trang Chủ</a></li>
					<li><a href="xemTTNhaTro.xhtml">Nhà trọ</a></li>
					<li><a href="xemThongTinQA.xhtml">Quán ăn</a></li>
					<li><a href="xemTTTuyenDung.xhtml">Tuyển dụng</a></li>					
					<li><a href="about.xhtml">Về trang web</a></li>
				</ul>
				<div style="clear: both"></div>
			</div>
			<!-- End Navigation menu -->
		</div>
	</div>
	
	<!-- Javascript for Slide Menu and Slide picture -->	
	<script type="text/javascript" src="js/jquery.js"></script> 
	<script type="text/javascript" src="js/bootstrap.js"></script> 
	<!--        <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>  Pretty Photo 
	        <script type="text/javascript" src="js/filter.js"></script>  Filter for support page -->
	<!--<script type="text/javascript" src="../js/jquery-ui.js"></script>-->
	<script type="text/javascript" src="js/nav.js"></script>
	<script type="text/javascript" src="js/custom.js"></script> 
	<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
	<!--<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>-->
	   <script type="text/javascript" src="js/webwidget_menu_glide.js"></script>
	
	<script>
	$('.carousel').carousel({
	       interval: 3000
	  })
	  $(document).ready(function() {
	      $('.newCollection').cycle({
	          fx: 'scrollUp', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	          speed: 200,
	          timeout: 3000,
	          pause: 1
	      });
	      $('.newCollection2').cycle({
	          fx: 'scrollDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	          speed: 300,
	          timeout: 2700,
	          delay: -2000,
	          pause: 1
	      });
	  });
	</script>
	<script>
	$(document).ready(function() {
		$("#webwidget_menu_glide").webwidget_menu_glide({
			menu_width : "110",
			menu_height : "40",
			menu_text_size : "15",
			menu_text_color : "#000",
			menu_sprite_color : "#003399",
			menu_sprite_text_color : "white",
			menu_background_color : "rgb(250, 250, 150)",
			menu_margin : "5",
			sprite_speed : "normal",
			container : "webwidget_menu_glide"
		});
	});
	</script>
	<!-- End Javascript -->
</h:body>
</html>
